<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取组件中内容</title>
    <!--    react.js的核心文件, 支持react语法-->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <!--    react-dom.js 支持react有关的DOM操作-->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!--    jsx-->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script type="text/babel">
    let  app=document.getElementById('app');
class Child1 extends React.Component{
    render() {
        return <fieldset>
            <legend><h2>这是child1组件</h2></legend>
            <ul>
                {this.props.citys.map((v,i)=>{
                    return <li key={i}>{v}</li>
                })}

            </ul>
            <hr/>
            {console.log(this.props.children)}
            <ul>
                {this.props.children.map((v,i)=>{
                    return <li key={i}>{v}</li>
                })}
            </ul>
        </fieldset>
    }
};
let cityArray=["郑州","杭州","广州","泉州","兰州"]
    ReactDOM.render(<Child1 citys={cityArray}>
        <a href="###">我是A标签</a>
    <h2>我是一个和爱好</h2>
        <input/>
    </Child1>,app);
/*
在组件中获取内容,通过this.props.children获取:children是一个数组,储存了当前组件中所有内容!(类似Vue中的插槽)
* */
</script>